<template>
	<div class="home">
		<!-- <tabBarVue /> -->
		<swiper class="swiper" 
			circular 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<div class="nav_tab">
			<div :class="['nav_item',navKey==item.id ? 'active_nav':'']" v-for="item in navList" :key="item.id" @click="changeNav(item)">
				<img class="nav_img" :src="navKey==item.id ? item.activeUrl : item.url" alt="">
				<div class="nav_text">{{ item.name }}</div>
			</div>
		</div>
		<van-sticky @scroll="handScroll">
			<div :class="['main',isScrollTop ? 'sticky_box' :'']">
				<div class="main_l" v-for="item in mainList" :key="item.id" @click="changeMain(item)"> 
					<div :class="['main_item',mainKey==item.id ? 'active_main' : '']">{{ item.name }}</div>
				</div>
				<div class="main_filter" @click="blindDateCondition">
					<span class="main_condition">相亲条件</span>
					<span class="iconfont icon-xiangxia"></span>
				</div>
			</div>
			<scroll-view scroll-y :class="isScrollTop ? 'person_list':''" @scrolltolower="addMore">
				<div class="item_person" v-for="(item,index) in nameList" :key="index" @click="goDetail(item)">
					<img class="main_avatar" :src="item.avatar" alt="">
					<div class="self_intro">
						<div class="self_name">
							<div class="self_name_text">{{ item.name }}</div>
							<div class="self_verify" v-if="item.realName">
								<span class="icon_verify iconfont icon-renzhengdunpaianquanbaozhangzhibao"></span>
								<span class="name">已实名</span>
							</div>
						</div>
						<div class="self_intro">
							<span>{{ item.house}}</span>
							<span class="line">|</span>
							<span>{{ item.job}}</span>
							<span class="line">|</span>
							<span>{{ item.income}}</span>
						</div>
						<div class="self_about">
							<span>{{ item.age}}</span>
							<span>{{ item.height}}</span>
							<span>{{ item.degree}}</span>
						</div>
						<div class="self_pic">
							<img class="self_pic_more" v-for="(v,key) in item.selfPic" :src="v" alt="" :key="key">
						</div>
					</div>
				</div>
			</scroll-view>
		</van-sticky>
		<homeSetVue ref="homeSetRef" :showPoup="showPoup" @closeHomePoup="closeHomePoup" @reset="resetFn" @submit="submitFn"/>
	</div>
</template>

<script>
	import tabBarVue from "../components/tabbar/index.vue"
	import homeSetVue from "../components/homeSet/index.vue"
	import {getList} from '/config/api.js'
	export default {
		components:{tabBarVue,homeSetVue},
		data() {
			return {
				isScrollTop:false,
				indicatorDots:true,
				autoplay:true,
				interval:3000,
				duration:500,
				banner:[
					{url:'/static/txn.jpeg'},
					{url:'/static/txw.jpeg'},
				],
				navKey:0,
				navList:[
					{id:0,name:'月老评语',url:'/static/default/mingxinghuodong.png',activeUrl:'/static/active/mingxinghuodong.png'},
					{id:1,name:'最新活动',url:'/static/default/huodong.png',activeUrl:'/static/active/huodong.png'},
					{id:2,name:'我们脱单了',url:'/static/default/lianai_love-01.png',activeUrl:'/static/active/lianai_love-01.png'},
				],
				mainKey:0,
				mainList:[
					{id:0,name:'活跃'},
					{id:1,name:'推荐'},
					{id:2,name:'实名'},
					{id:3,name:'最新'},
				],
				nameList:[],
				mock:{
					id:0,
					avatar:'/static/txn.jpeg',
					name:'李四',
					realName:true,
					house:'和父母住',
					job:'要饭',
					income:'2000',
					age:20,
					height:'167cm',
					degree:'高中',
					selfPic:[
						'/static/txn.jpeg',
						'/static/txw.jpeg',
					]
				},
				showPoup:false,
			}
		},
		methods: {
			getHomeList(){
				getList().then(res=>{
					console.log(res,'======')
				})
			},
			changeNav(item){
				this.navKey = item.id
				switch(this.navKey){
					case 2:
						uni.navigateTo({
							url:'/mysub/delisting/index'
						})
						break;
				}
			},
			changeMain(item){
				this.mainKey = item.id
			},
			blindDateCondition(){
				this.showPoup = true
			},
			closeHomePoup(val){
				this.showPoup = val
			},
			handScroll(e){
				const {scrollTop,isFixed} = e.detail
				this.isScrollTop = isFixed
			},
			addMore(e){
				const {scrollTop} = e.detail
			},
			goDetail(item){
				uni.navigateTo({
					url:'/mysub/detail/index?id='+item.id
				})
			},
			resetFn(){

			},
			submitFn(){},
		},
		mounted(){
			this.getHomeList();
			this.nameList.length=20
			this.nameList.fill(this.mock,0,20)
			this.nameList.push({...this.mock,name:'王五',id:2})
		}
	}
</script>

<style lang="scss" scoped>
.home{
	padding:0 30rpx;
	background-color: #f7f7f7;
}
.swiper{
	margin:10rpx 0;
	.swiper-item{
		height: 300rpx;
		width: 100%;
		overflow: hidden;
		border-radius: 10rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.nav_tab{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-bottom: 40rpx;
	border-bottom: 1px solid #ccc;
	.nav_item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.nav_img{
			width: 80rpx;
			height: 80rpx;
		}
		.nav_text{
			margin-top: 10rpx;
			font-size: 30rpx;
		}
	}
	.active_nav{
		color: #1c6ad7;
	}
}
.sticky_box{
	padding:0 30rpx;
}
.main{
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.main_l{
		display: flex;
		align-items: center;
		
		
		.main_item{
			position: relative;
			font-size: 28rpx;
			color: #666;
			margin-right: 50rpx;
		}
		.active_main{
			position: relative;
			&::after{
				content: '';
				position: absolute;
				width: 100%;
				height:10rpx;
				background-color: #1c6ad7;
				opacity: 0.8;
				bottom: 0;
				left: 0;
				z-index: -1;
				border-radius: 5rpx;
			}
		}
		
	}
	.main_filter{
		.main_condition{
			margin-right: 8rpx;
		}
	}
	
}
.item_person{
	background-color: #fff;
	padding:20rpx;
	border-radius: 6rpx;
	display: flex;
	margin-bottom: 20rpx;
	.main_avatar{
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	.self_intro{
		text-align: left;
		.self_name{
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;
			.self_name_text{
				font-size: 30rpx;
				color: #000;
				margin-right: 10rpx;
			}
			.self_verify{
				border-radius: 15rpx;
				height: 30rpx;
				padding: 0 8rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				font-size: 20rpx;
				background-color: #1c6ad7;
				color: #fff;
				.icon_verify{
					font-size: 20rpx;
				}
				.name{
					margin-left: 4rpx;
				}
			}
		}
		.self_intro{
			font-size: 28rpx;
			color: #ccc;
			margin-bottom: 20rpx;
			.line{
				margin:0 10rpx;
			}
		}
		.self_about{
			margin-bottom: 20rpx;
			&>label{
				height: 30rpx;
				display: inline-flex;
				align-items: center;
				border:1px solid #1c6ad7;
				color: #1c6ad7;
				padding:0 10rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
			}
		}
		.self_pic{
			display: flex;
			flex-wrap: nowrap;
			.self_pic_more{
				width: 50rpx;
				height: 50rpx;
				border-radius: 5rpx;
				margin-right: 10rpx;
			}
		}
	}
}
.person_list{
	height: calc(100vh - 80rpx);
}
</style>
